<!-- 组件 -->
<template>
  <div class="weather-icon">
    <img :src="images[weatherType]" alt="" />
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    weatherType: {
      type: String,
      default: '晴',
    },
  },
  data() {
    return {
      weatherIcon: require('@/assets/img/weather/晴.png'),
      images: {
        xue: require('@/assets/img/weather/小雪.png'),
        lei: require('@/assets/img/weather/雷阵雨.png'),
        shachen: require('@/assets/img/weather/沙尘暴.png'),
        wu: require('@/assets/img/weather/雾.png'),
        bingbao: '冰雹',
        yun: require('@/assets/img/weather/多云.png'),
        yu: require('@/assets/img/weather/小雨.png'),
        yin: require('@/assets/img/weather/阴.png'),
        qing: require('@/assets/img/weather/晴.png'),
        晴: require('@/assets/img/weather/晴.png'),
        阴: require('@/assets/img/weather/阴.png'),
        多云: require('@/assets/img/weather/多云.png'),
        阵雨: require('@/assets/img/weather/阵雨.png'),
        雷阵雨: require('@/assets/img/weather/雷阵雨.png'),
        小雨: require('@/assets/img/weather/小雨.png'),
        中雨: require('@/assets/img/weather/中雨.png'),
        大雨: require('@/assets/img/weather/大雨.png'),
        阵雪: require('@/assets/img/weather/阵雪.png'),
        小雪: require('@/assets/img/weather/小雪.png'),
        中雪: require('@/assets/img/weather/中雪.png'),
        大雪: require('@/assets/img/weather/大雪.png'),
        暴雪: require('@/assets/img/weather/暴雪.png'),
        雾: require('@/assets/img/weather/雾.png'),
        霾: require('@/assets/img/weather/雾霾.png'),
        沙尘暴: require('@/assets/img/weather/沙尘暴.png'),
      },
    };
  },
  components: {},
};
</script>

<style scoped>
.weather-icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 6px 0;
}
.weather-icon img {
  width: 100%;
  height: 100%;
}
</style>
